<template>
  <div class="invite-join-team" :style="{'height': clientHeight + 'px'}">
    <div class="top">
      <div class="img-list">
        <div class="img-wrapper">
          <img src="@/assets/image/camera.png" alt=""/>
        </div>
        <p class="point-list">
          <span class="point" v-for="(item,index) in 3" :key="index"></span>
        </p>
        <div class="img-wrapper">
          <img src="@/assets/image/account.png" alt=""/>
        </div>
        <p class="point-list">
          <span class="point" v-for="(item,index) in 3" :key="index"></span>
        </p>
        <div class="img-wrapper">
          <img src="@/assets/image/quanzi.png" alt=""/>
        </div>
      </div>
      <div class="text-list">
        <p class="text">人人会拍</p>
        <p class="text">智能获客</p>
        <p class="text">轻松养号</p>
      </div>
    </div>
    <div class="form-content">
      <p class="title">【{{ name }}】</p>
      <p class="sub-title">邀请您加入我们！</p>
      <div class="has-experience" v-if="activityInfo.has_activities">
        <p class="experience-title">恭喜您获得虚拟编导使用资格！</p>
        <p class="experience-subtitle">（免费{{ activityInfo.give_strip }}条短视频制作体验）</p>
      </div>
      <p class="input-cell">
        <img class="input-icon" src="@/assets/image/input-user.png" alt=""/>
        <input 
          type="text" 
          placeholder="您的真实姓名" 
          maxlength="4"
          v-model="real_name"/>
      </p>
      <p class="input-cell">
        <img class="input-icon" src="@/assets/image/input-shop-name.png" alt=""/>
        <input 
          type="text" 
          maxlength="9"
          placeholder="您的账号昵称" v-model="username"/>
      </p>
      <p class="input-cell">
        <img class="input-icon" src="@/assets/image/input-mobile.png" alt=""/>
        <input 
          type="text"
          maxlength="11"
          placeholder="您的手机号，将用于登录" v-model="mobile"/>
      </p>
      <div class="input-cell code-cell">
        <img class="input-icon" src="@/assets/image/input-code.png" alt=""/>
        <input type="text" placeholder="短信验证码" v-model="code" maxlength="4"/>
        <p 
          :class="{'dis': timer }"
          class="get-code" 
          @click="getCode">{{ sumText }}</p>
      </div>
      <div class="submit-btn" :class="{'dis': !canSubmit}" @click="submit">提交申请</div>

    </div>
    <div class="bottom-tip">
      注：申请后通知总部端进行审核，审核通过后即可享受视加云虚拟编导服务
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { sendCode } from "@/api/inviteNewPerson"
import { joinTeam, hasActivities } from "@/api/account"

export default {
  data() {
    return {
      real_name: '',
      username: '',
      mobile: '',
      code: '',
      phoneTest: /^1[3-9]\d{9}$/,
      timer: null,
      sumText: '获取验证码',
      canSubmit: false,
      clientHeight: 0,
      activityInfo: {},
    }
  },
  computed: {
    name () {
      return this.$route.query.username
    },
    // 总部账号id
    hq_id () {
      return this.$route.query.inviter_id
    },
  },
  watch: {
    real_name (val) {
      if (this.vilidateForm()) this.canSubmit = true
    },
    username (val) {
      if (this.vilidateForm()) this.canSubmit = true
    },
    mobile () {
      if (this.vilidateForm()) this.canSubmit = true
    },
    code () {
      if (this.vilidateForm()) this.canSubmit = true
    }
  },
  mounted(){
    console.log('query:', this.$route.query)
    this.clientHeight = document.documentElement.clientHeight;
    document.title = '账号开通申请'
    hasActivities({
      hq_id: this.hq_id
    }).then(res => {
      this.activityInfo = res
    })
  },
  methods: {
    getCode () {
      if(this.timer) return
      if(this.mobile === ''){
        Toast('请输入手机号！')
        return
      }
      if(!this.phoneTest.test(this.mobile)){
        Toast('请输入正确的手机号！')
        return
      }
      sendCode({mobile: this.mobile}).then(res => {
        console.log('发送验证码成功')
        clearInterval(this.timer)
        let sum = 60
        this.timer = setInterval(()=>{
          sum --
          this.sumText = sum + '秒'
          if(sum <= 0){
            this.sumText = '获取验证码'
            clearInterval(this.timer)
            this.timer = null
          }
        },1000)
      })
    },
    vilidateForm () {
      const {real_name, username, code, mobile } = this
      if (!real_name || !username || !code || !mobile) {
        return false
      }
      if(!this.phoneTest.test(mobile)){
        return false
      }
      return true
    },
    // 检查表单是否填写完整
    checkForm () {
      const {real_name, username, code, mobile } = this
      if (!real_name || !username || !code || !mobile) {
        Toast('请检查表单是否填写完整')
        return false
      }
      if(!this.phoneTest.test(mobile)){
        Toast('手机号格式有误')
        return false
      }
      return true
    },
    submit () {
      if (!this.checkForm()) return
      const {real_name, username, code, mobile, hq_id } = this

      joinTeam({
        real_name, username, code, mobile,
        inviter_id: hq_id,
        activities_id: this.activityInfo.activities_id || null,
      }).then(res => {
        this.$router.push({
          path: '/joinTeamWait',
          query: {
            real_name, username, mobile
          }
        })
      }).catch(err => {
        console.log('join team err:', err)
        Toast(err.message)
      })
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style scoped>
.has-experience {
  width: 64vw;
  height: 13.6vw;
  margin-bottom: 5.33vw;
  border-radius: 4px;
  background: rgba(255, 0, 0, 0.1);
  box-sizing: border-box;
  border: 1px solid #FF0000;
  padding-top: 1.07vw;
}

.experience-title {
  margin-bottom: 1.37vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 400;
  line-height: normal;
  color: #FF0000;
  text-align: center;
}
.experience-subtitle {
  line-height: 4.8vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  line-height: normal;
  color: #666666;
  text-align: center;
}


.invite-join-team {
  position: relative;
}
.bottom-tip {
  position: absolute;
  bottom: 6.4vw;
  left: 50%;
  transform: translateX(-50%);
  width: 74.4vw;
  font-family: Source Sans Pro;
  font-size: 2.67vw;
  font-weight: 200;
  line-height: 3.47vw;
  color: #CCCCCC;
}
.submit-btn {
  width: 53.87vw;
  height: 11.73vw;
  margin: 0 auto;
  text-align: center;
  line-height: 11.73vw;
  border-radius: 5.87vw;
  background: #0A67FF;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FFFFFF;
}

.get-code {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3.2vw;
  width: 20.53vw;
  height: 7.47vw;
  border-radius: 3.73vw;
  background: #0A67FF;
  line-height: 7.47vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  font-weight: 500;
  color: #FFFFFF;
}
.get-code.dis {
  background: #ccc;
}
.input-cell {
  position: relative;
  display: flex;
  align-items: center;
  width: 64vw;
  height: 11.73vw;
  margin: 0 auto 2.13vw;
  box-sizing: border-box;
  padding-left: 4.27vw;
  background: #F7F7F7;
  border-radius: 1.07vw;
  overflow: hidden;
}
.code-cell {
  margin-bottom: 16vw;
}
.input-cell > img {
  width: 4.27vw;
  height: 4.27vw;
  margin-right: 3.2vw;
}
input {
  flex: 1;
  border: none;
  outline: none;
  background: #F7F7F7;
}
.title {
  margin-bottom: 2.13vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 4.27vw;
  font-weight: bold;
  text-align: center;
  color: #333333;
}
.sub-title {
  margin-bottom: 7.47vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: normal;
  color: #666666;
}
.form-content {
  position: relative;
  top: -34.5vw;
  width: 74.67vw;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 6.4vw;
  background: #fff;
  padding: 5.33vw;
}
.text {
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #FFFFFF;
}
.text-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.point-list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.point {
  display: inline-block;
  width: 1.07vw;
  height: 1.07vw;
  margin-right: 1.07vw;
  border-radius: 50%;
  background: #fff;
}
.img-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4.27vw;
}
.img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16vw;
  height: 16vw;
  background: #ffffff;
  border-radius: 50%;
}
.img-wrapper > img {
  width: 10.13vw
}
.top {
  box-sizing: border-box;
  padding: 8vw 11.47vw 0;
  height: 79.47vw;
  background: linear-gradient(135deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
}
.dis {
  background: #C1C1C1;
}
</style>